<template>
    <div>
        <ul class="pagenation">
            <li @click="choseIndex(item)" :class="pageIndex === item ? 'active' : ''" v-for="item in indexs" :key="item">{{item < 1 ? '...' : item}}</li>
        </ul>
    </div>
</template>

<script>
export default {
//   name: '',
    props: {
        pageIndex: {
            type: Number,
            default: 1
        },

        pageSize: {
            type: Number,
            default: 10
        },

        totle: {
            type: Number,
            default: 120
        },

        pages: {
            type: Array,
            default: () => {
                return [5, 10, 15]
            }
        }
    },

    computed: {
        indexs() {
            let left = 1 // 默认左侧值为1
            let arr = []
            // 根据数据总数计算总共有分为多少页
            
            let all = Math.ceil(this.totle / this.pageSize)
            // 默认右侧值为页码最大值
            let right = all
            // 当总页码数量不小于十一页时
            if(all > 10) {
                // 如果当前页大于5并且小于最大页码数减4
                if(this.pageIndex > 5 && this.pageIndex < all - 4) {
                    // 也就是说当pageIndex是 6 则left 为1 right为10
                    left = this.pageIndex - 4 // left值设置为当前页码数减5
                    right = this.pageIndex + 4 // 最右侧为当前页码数加4
                } else {
                    if(this.pageIndex<=6) {
                        left = 1
                        right = 10
                    } else {
                        right = all 
                        left = right - 9
                    }
                }
            }
            // console.log(left, right);
            while(left <= right) {
                // 
                arr.push(left)
                left++
            }
            // console.log(arr);
            if (arr[0] > 1) {
                arr[0] = 1;
                arr[1] = -1;
            }
            if (arr[arr.length - 1] < all) {
                arr[arr.length - 1] = all;
                arr[arr.length - 2] = 0;
            }
            // console.log(arr);
            return arr
        }
    },
    data() { 
        return {

        }
    },
    created() {

    },
    methods:{
        choseIndex(data) {
            if(data < 1) return
            this.$emit('update:pageIndex', data)
        }
    },
}
</script>

<style scoped>
    .pagenation {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .pagenation li {
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: skyblue;
        margin: 0 5px;
        cursor: pointer;
    }
    .pagenation .active {
        background-color: blue;
        color: #fff;
    }
</style>